<script lang="ts" setup>
import {onMounted, reactive, ref, watch} from "vue"
import { useRoute } from "vue-router";
import {requestHighqualityList, requestHighqualitySongList} from "../../utils/axiosURL";
import defaultImg from "../../assets/logo.png";

const route = useRoute()
// 传入的 cat
const receiveCat = ref<string | any>(route.query.cat)
// 精品歌单标签列表
const fineProducts_tagList = reactive<any>([])
// 更多标签容器显示状态
let ShowStateMores = ref<boolean>(false)
// 精品歌单数据
const fineProducts_songListData = reactive<any>([])
// 无数据
let notData = ref<boolean>(false)


// 精品歌单标签列表
const requestHighqualityListFn = () => {
  requestHighqualityList().then((data: any) => {
    fineProducts_tagList.values = data.tags
  }).catch(_ => { })
}

// 获取精品歌单
const requestHighqualitySongListFn = () => {
  requestHighqualitySongList(50, receiveCat.value).then((data: any) => {
    if (!data.playlists.length) return notData.value = true
    fineProducts_songListData.values = data.playlists
  }).catch(_ => { })
}

// 点击全部分类按钮的事件处理函数
const clickAllTag = () => {
  receiveCat.value = '全部'
  ShowStateMores.value = false
}

// 点击具体分类向的事件处理函数
const clickCatItemFn = (name: string) => {
   receiveCat.value = name
  ShowStateMores.value = false
}

window.addEventListener('click', () => ShowStateMores.value = false)

// 监听 requestTag 字段的变化
watch(receiveCat, () => {
  notData.value = false
  requestHighqualitySongListFn()
})


onMounted(() => {
  requestHighqualityListFn()
  requestHighqualitySongListFn()
})

</script>

<template>
  <div class="bestWrap">
    <div class="topWrap">
      <p class="bestTitle">精品歌单</p>
      <button class="btnWrap" @click.stop="() => ShowStateMores = !ShowStateMores">
        <span class="iconfont icon-guolv"></span>
        <span>{{ receiveCat }}</span>
      </button>
      <div class="moresCatWrap" v-if="ShowStateMores">
        <div class="AllTag">
          <button
              class="tagCate"
              :class="'全部' === receiveCat ? 'AllTagDefault' : ''"
              @click.stop="clickAllTag"
          ><span>全部歌单</span></button>
        </div>
        <ul>
          <li v-for="item in fineProducts_tagList.values"
              :class="item?.name === receiveCat ? 'AllTagDefault' : ''"
              @click.stop="clickCatItemFn(item.name)"
          >{{ item.name }}</li>
        </ul>
      </div>
    </div >

    <div class="bestSongListWrap">
      <div v-if="notData" class="noAuthrity">Sorry 无数据</div>
      <div class="bestSongListItem" v-for="item in fineProducts_songListData.values" v-else-if="fineProducts_songListData.values.length !== 0">
        <div class="leftImg">
          <RouterLink :to="`/SongListDetail/${item.id}`">
            <img :src="item.coverImgUrl">
          </RouterLink>
        </div>
        <div class="rightCopyWrite">
          <RouterLink :to="`/SongListDetail/${item.id}`">
            <p class="songListDesc">{{ item.name }}</p>
          </RouterLink>
          <RouterLink :to="{ path: '/userDetail', query: { id: item.creator?.userId } }">
            <p class="author">{{ item.creator.nickname }}</p>
          </RouterLink>
          <div class="tags">{{ item.tag }}</div>
        </div>
      </div>
      <BestPlayListItemSkeleton v-else v-for="item in 12" />
    </div>
  </div>

</template>

<style lang="scss" scoped>
.bestWrap {
  width: 100%;
  height: 93%;
  padding-bottom: 60px;
  box-sizing: border-box;
  overflow: auto;

  .topWrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    padding: 30px 30px 0;
    box-sizing: border-box;

    .bestTitle { @extend .moduleTitle; }

    .btnWrap {
      @extend .clearButton;
      padding: 3px 15px;
      border-radius: 25px;
      margin-left: 30px;
      border: 1px solid rgba(0, 0, 0, 0.29);
      font-size: $font-size-xs;

      .icon-guolv {
        vertical-align: -2px;
        font-size: $font-size-xs;
        margin-right: 6px;
      }

      &:hover {
        background-color: rgb(242,242,242);
      }
    }

    .moresCatWrap {
      position: absolute;
      top: 65px;
      right: 30px;
      width: 500px;
      padding: 10px;
      border-radius: 6px;
      box-shadow: 0 0 7px -3px gray;
      background-color: #fff;

      .AllTag {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        height: 60px;
        cursor: pointer;
        border-bottom: 1px solid $lineColor;

        .tagCate {
          @extend .clearButton;
          padding: 6px 15px;
          border-radius: 25px;
          margin-left: 30px;

          span {
            font-size: $font-size-sm;
          }
        }

        .AllTagDefault {
          background-color: rgb(254,245,245);
          color: $font_red_color;
        }

        &:hover .tagCate {
          color: $font_red_color;
        }
      }

      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          width: 80px;
          text-align: center;
          line-height: 40px;
          font-size: $font-size-sm;
          color: $font_main_color;
          font-family: $textFont;
          padding: 0 10px;
          margin: 6px 0;
          border-radius: 25px;
        }

        .AllTagDefault {
          background-color: rgb(254,245,245);
          color: $font_red_color;
        }
      }
    }
  }

  .bestSongListWrap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 10px;
    padding-left: 30px;
    box-sizing: border-box;

    .noAuthrity {
      width: 100%;
      text-align: center;
      margin-top: 30px;
      font-family: $activeTextFont;
      font-size: $font-size-lg2;
    }

    .bestSongListItem {
      display: flex;
      width: 380px;
      height: 135px;
      margin: 0 10px 10px 0;

      .leftImg {
        flex-basis: 135px;
        width: 100%;

        img {
          width: 100%;
          height: 100%;
          border-radius: 6px;
        }
      }

      .rightCopyWrite {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        margin-left: 10px;

        .songListDesc {
          //font-size: $font-size-sm;
          font-family: $textFont;
          color: $font_main_color;
        }

        .author {
          font-size: $font-size-xs;
          font-family: $textFont;
          color: $font_second_color;
        }

        .tags {
          width: fit-content;
          font-size: $font-size-xs;
          font-family: $textFont;
          color: $font_red_color;
          border: 1px solid $font_red_color;
          border-radius: 2px;
        }
      }
    }
  }
}
</style>
